<!--该页面显示的是每个课程包含的任务信息-->

<template>
    <div>
        <el-container>
            <el-header>
                <div id="title">课程班级</div>
                <div><i class="el-icon-search" id="icon"></i></div>
                <el-input  placeholder="搜索课程" id="input"></el-input>
                <div id="jia">加入班级</div>
                <div id="tong">通知</div>
                <div><i class="el-icon-user-solid" id="icon1" @click="handleicon"></i></div>
            </el-header>
            <el-main style="background-color: white;">
              <div id="T">{{ course.CourseName }}</div>
              <div id="T2">班号：{{ course.ClassNum }}</div>
              <div id="T3">当前身份：{{ this.$store.state.typeState }}</div>
              <el-avatar icon="el-icon-user-solid" id="T4"></el-avatar>
              <div id="T5">{{ course.TeacherName }}</div>
              <hr style="margin-top:12%">
              <div id="T6">
                <el-radio-group v-model="kind">
                  <el-radio-button label="全部"></el-radio-button>
                  <el-radio-button label="提交中"></el-radio-button>
                  <el-radio-button label="补交中"></el-radio-button>
                  <el-radio-button label="已截至"></el-radio-button>
                </el-radio-group>
              </div>
              <el-button type="primary" id="T7">发布任务</el-button>
              <i class="el-icon-search" id="T9" @click="find1"></i>
              <el-input v-model="input" placeholder="搜索任务" id="T8"></el-input>
              <div style="width: 80%;position: absolute;top: 47%;">
                <div v-for="(task,index) in course.Task" :key="index"><!--v-for渲染-->
                <div v-if="task.State===kind||kind==='全部'" style="border: 1px solid;margin: 30px;position: relative;left: 10%;height: 150px;" 
                :style="{backgroundColor:task.State==='Finish'?'':'rgb(174, 217, 235,0.3)'}" @click="handleTask(this.id,task)"><!--v-if渲染-->
                <el-button type="danger" round v-if="task.State==='已截至'" class="but">已截至</el-button>
                <el-button type="success" round v-if="task.State==='补交中'" class="but">补交中</el-button>
                <el-button type="primary" round v-if="task.State==='提交中'" class=but>提交中</el-button>
                <div id="T10">{{ task.TaskName }}</div>
                <div id="T11"><i class="el-icon-time"></i>{{ task.StartTime }} 至 {{ task.EndTime }}</div>
                <div id="T12">查看任务</div>
              </div>
                </div>
              </div>
            </el-main>
        </el-container>
    </div>
</template>
<style>
#T12{
  font-size: 30px;
  position: absolute;
  top: 0%;
  left: 85%;
}
#T11{
  position: absolute;
  left: 25px;
  top: 30%;
}
#T10{
  margin-top: -42px;
  position: absolute;
  left: 11%;
  font-size: 25px;
}
.but{
  position: absolute;
  left: 1%;
  top: 10%;
  font-size: 20px;
}
#T9{
  position: absolute;
  left: 74%;
  top: 45%;
  font-size: 20px;
  font-weight: 700;
}
#T8{
  position: absolute;
  margin-top: -2%;
  left: 76.5%;
  width: 12%;
  height: 30px;
}
#T7{
  position: absolute;
  top: 37%;
  left: 77%;
  width: 150px;
  height: 50px;
  font-weight: 700;
  font-size: 20px;
}
#T6{
  position: absolute;
  top: 30%;
  left: 10%;
}
#T5{
  position: absolute;
  left:12.5%;
  top:19%
}
#T4{
  position:absolute;
  left:9.5%;
  top:27%
}
#T3{
  position: absolute;
  left:75%;
  top:8%
}
#T2{
  position: absolute;
  left: 10%;
  top:12%;
}
#T{
  font-size: 30px;
  position: absolute;
  left: 10%;
  top:5%;
}
.grid-cotainer{
    display:grid;
    grid-template-columns: repeat(3,300px);
    grid-gap:50px;
}
.grid-item{
    padding: 20px;
    border:1px solid;
    border-radius: 5px;
}
  .el-col {
    border-radius: 4px;
  }
  .el-row {
    margin-bottom: 20px;
  }
  .bg-purple-light {
    background: #0c2152;
  }
  .bg-purple-dark {
    background: #830608;
  }
  .el-header{
    background-color: rgb(85,85,85);
    color: #333;
    text-align: center;
    line-height: 80px;
  }
  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 160px;
  }
  
  body > .el-container {
    margin-bottom: 40px;
  }
  
  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }
  
  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }
  #title{
    color: #E9EEF3;
    position:absolute;
    top: 0px;
    left:80px;
  }
  #icon{
    color: white;
    font-size: 25px;
    position: absolute;
    top:30px;
    left:700px;
  }
  #input{
    height:33px;
    width:230px;
    position: absolute;
    top:-30px;
    left:700px;
  }
  #jia{
    color: #E9EEF3;
    position:absolute;
    top: 0px;
    left:1000px;
  }
  #tong{
    color: #E9EEF3;
    position:absolute;
    top: 0px;
    left:1200px;
  }
  #icon1{
    color: white;
    font-size:40px;
    position: absolute;
    top:20px;
    left: 1350px;
  }
  
</style>
<script>
import axios from 'axios'
export default {
  data() {
    return {
      id:'',
      input: '',
      course:null,
      index:'',
      currentTime:'',
      kind:'全部'
    }
  },
  beforeDestroy() {
    clearInterval(this.timer); // 在组件销毁前清除计时器
  },
  mounted(){
    this.updateCurrentTime()
    this.timer = setInterval(this.updateCurrentTime, 1000);
    this.index=this.$route.params.index
    this.id=this.$route.params.id
    //根据index从后端获取课程的详细信息，主要是课程所包含的任务的信息
    //传出 id表示课程的id，index表示任务在课程的Tasks数组中的索引
    //传回 id 课程编号  CourseName课程名 ClassNum班号 TeacherName教师姓名 
    // Task任务数组，格式如下 
    //       "TaskName": "第一章课后习题",（任务名）
        //   "State": "已截至",类型（已截止，提交中，补交中）
        //   "id": "10086",（任务编号）
        //  "StartTime": "2024-12-12 13:00",（任务开始时间）
        //  "EndTime": "2024-12-12 15:00",（任务结束时间）
    axios.post('http://127.0.0.1:4523/m2/5591894-5270100-default/243661201?apifoxApiId=243661201',{
        index:this.index,
        id:this.id
      }).then(res=>{
        this.course=res.data
      })
  },
  methods:{
    handleTask(id,task){
      if(task.Type=='Unfinished'){
          this.$router.push({
          name:'DescribePage',
          params:{
            courseid:id,
            id:task.id
          }
        })
      }else if(task.Type=='Finished'){
        this.$router.push({
          name:'FinishedDescribe',
          params:{
            courseid:id,//课程id
            id:task.id//任务id
          }
        })
      }
    },
    handleicon(){
      this.$router.push('/StuPage')
    },
    //传入 input 搜索关键字
    //传出 和上面一样，Task数组为搜索到的任务
    find1(){
      axios.post('',{
        input:this.input
      }).then(res=>{
        this.course=res.data
      })
    },
    updateCurrentTime() {
      const now = new Date();
      const year = now.getFullYear();
      const month = String(now.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需要加1
      const day = String(now.getDate()).padStart(2, '0');
      const hours = String(now.getHours()).padStart(2, '0');
      const minutes = String(now.getMinutes()).padStart(2, '0');
      this.currentTime = `${year}-${month}-${day} ${hours}:${minutes}`; 
    },
  },
  
}
</script>